<template>
<#--    <Form label-position="left" :label-width="120" :model="writerForm" ref="writerForm" :rules="ruleValidate">-->
    <Form label-position="left" :label-width="120" :model="form" ref="form" :rules="ruleValidate">
        <Row class="writer-form">
            <Col span="12">
            <#if classInfo.fieldList?exists && classInfo.fieldList?size gt 0>
                <#list classInfo.fieldList as fieldItem >
<#--                    <#if ${fieldItem.fieldClass}=='boolean' >-->
<#--                      </#if>-->
            <#if fieldItem.fieldClass=='boolean' >
                <FormItem label="${fieldItem.fieldComment}" style="text-align: left" prop="${fieldItem.fieldName}">
                    <RadioGroup v-model="form.${fieldItem.fieldName}">
                        <Radio label="是" border></Radio>
                        <Radio label="否" border></Radio>
                    </RadioGroup>
                </FormItem>
            </#if>
<#--               <#elseif fieldItem.fieldClass!='boolean' >-->
<#--              <FormItem label="${fieldItem.fieldComment}" prop="${fieldItem.fieldName}">-->
<#--                        <Input placeholder="请输入${fieldItem.fieldComment}" v-model="writerForm.${fieldItem.fieldName}"/>-->
<#--                    </FormItem>-->
<#--            </#elseif>-->

            <#if fieldItem.fieldClass!='boolean' >
            <FormItem label="${fieldItem.fieldComment}" prop="${fieldItem.fieldName}">
                <Input placeholder="请输入${fieldItem.fieldComment}" v-model="form.${fieldItem.fieldName}"/>
            </FormItem>
            </#if>
            <#if fieldItem.fieldClass=='java.util.Date' >
                <FormItem label="${fieldItem.fieldComment}" prop="${fieldItem.fieldName}">
                    <DatePicker type="date" placeholder="请选择${fieldItem.fieldComment}" v-model="form.${fieldItem.fieldName}"></DatePicker>
                </FormItem>
            </#if>
                </#list>
            </#if>

            </Col>
            <Col span="12">
            <!--        2021年9月18日10:00:46  mqp-->
            <!--        action="//jsonplaceholder.typicode.com/posts/"-->
            <Upload   action="//jsonplaceholder.typicode.com/posts/"  @change="changeExcel"  >
                <Button icon="ios-cloud-upload-outline">Upload files</Button>
            </Upload>
            <FormItem label="头像">
                <phone-upload @change="changePhoto" :image-url="form.photo"></phone-upload>
            </FormItem>
            <!--          图片名字有了  现在 change-->
            <!--        只是作为 保存图片用，没有用到 action-->

            </Col>
        </Row>

        <FormItem :label-width="0">
            <Button type="primary" style="margin-right: 20px" @click="commit">{{ editButton }}</Button>
            <Button>重置</Button>
        </FormItem>
    </Form>
</template>

<script>
    import {cityData} from "../../utils/cityData";
    import PhoneUpload from "../upload/phone-upload";
    import TeamSelect from "../input/team-select";
    import FieldSelect from "../input/field-select";
    import {createWriter, getWriterInfo, updateWriter, uploadPhoto,uploadExcel} from "../../api/writer";
    import {formatDate} from "../../utils/common";
    import FieldMultiSelect from "../input/field-multi-select";
    import {validatorTel} from "../../utils/validate";
    import {update,create,post} from "../../utils/request";
    export default {
        name: "writer-form",
        components: {FieldMultiSelect, FieldSelect, TeamSelect, PhoneUpload},
        props: {
            wid: {
                default: null
            },
            // 三种类型: 修改（update）、管理员添加（create）、用户注册（registerwr）
            type: {
                default:'create',
                // required: true,
                required: false,
                // required: true,
            },
            entityId:{
                required: false
            }
        },
        // 父组件
        beforeMount() {
            window.parentMounted = this._isMounted	// _isMounted是当前实例mouned()是否执行 此时为false
        },
        created() {
            if(!!this.entityId){
                this.editButton = '确认修改';
                post(this.tableName+"/find?id="+ this.entityId).then(res=>{
                    console.log(res)
                    this.form=res.data.data
                })
                return
                // return
            }
            this.editButton = '确认添加';

        },
        computed: {

        },
        data() {
            return {
                editButton: '',
                cityData: cityData,
                form:{
            <#if classInfo.fieldList?exists && classInfo.fieldList?size gt 0>
            <#list classInfo.fieldList as fieldItem >
            ${fieldItem.fieldName}: null,
            </#list>

            </#if>
                },
            tableName:"${classInfo.className?uncap_first}",


                photoData: null,
                excelData:null,

            }
        },
        methods: {


            updateForm() {
                this.$refs['form'].validate(valid => {
                    if(!valid){
                    return false;
                      }
                    update(this.form,this.tableName)
                    // updateWriter(this.handleWriterData())
                        .then((res) => {
                        console.log(res)
                            this.$Message.success('修改成功');
                        // this.updateWriterPhoto();
                        // 2021年9月18日10:22:56  mqp
                        // this.  updateWriterExcel();
                        this.init();
                    })

             })
            },
            createForm() {
                this.$refs['form'].validate(valid => {
                    if (valid) {
                        create(this.form,this.tableName).then(res => {
                            this.$Message.success('添加成功');
                        // this.writerForm.wid = res.data.data;
                        // this.updateWriterPhoto();
                        // this.init();
                        //
                        // if (this.type === 'register') {
                        //     this.$store.dispatch('user/getLoginInfo').then(() => {})
                        // }
                    })
                    } else {
                        return false;
                     }
            })
            },


            updateWriterPhoto() {
                if (!!this.photoData) {
                    uploadPhoto(this.writerForm.wid, this.photoData).then(() => {
                        // 失败提示，成功不进行提示
                        // uploadExcel
                    })
                }
            },


            updateWriterExcel() {
                if (!!this.excelData) {
                    uploadExcel(this.excelData).then(() => {
                        // 失败提示，成功不进行提示
                        // uploadExcel
                    })
                }
            },
            commit() {
                // if (!!this.wid) {
                //     this.updateWriter();
                // } else {
                //     this.createWriter();
                // }
                this.createForm()
            },
            // 处理添加和修改作家的信息
            handleWriterData() {
                this.writerForm.joinDate = formatDate(this.writerForm.joinDate);
                return this.writerForm;
            },
            // 什么时候 取得名字
            changePhoto(data) {
                this.photoData = data;
            },
            changeExcel(excelData) {
                this.excelData = excelData;
            }
        }
    }
</script>

<style scoped>
    .writer-form /deep/ .ivu-form-item {
        width: 80%;
    }

    .experience-form /deep/ .ivu-form-item {
        width: 90%;
    }

</style>
